import { CardBody } from 'reactstrap'
// ** Custom Components
import Avatar from '@components/avatar'

// ** Images
import defaultAvatar from '@src/assets/default.png'
import { ProviderType } from '../../views/provider/constant'

const ProviderCard = ({ data }) => {
  return (
    <div className="card-profile  provider-card-bgColor pb-0">
      <CardBody className="py-2  provider-cardbody">
        <div className="profile-image-wrapper">
          <div className="profile-image">
            <Avatar img={data?.avatar || defaultAvatar} />
          </div>
        </div>
        <div className=" py-2 ">
          <div className="mt-2">
            <div className="provider-details ">
              <h6 className=" m-0 text-color ">Name</h6>
              <h4 className="mb-0 black fw-bold  ">
                {data?.first_name || ''} {data?.last_name || ''}
              </h4>
            </div>
            <div className="provider-details my-1">
              <h6 className="m-0 text-color ">Provider Type</h6>
              <ul style={{ paddingLeft: '1.5rem', paddingRight: '1rem' }}>
                {data?.provider_license.length > 0 &&
                  data?.provider_license.map((item, i) => (
                    <li className="mb-0 black fw-bold bullets-color" key={i}>
                      <h4 className="m-0 fw-bold black">
                        {ProviderType[parseInt(item?.license_type)]?.text ||
                          '--'}
                      </h4>
                    </li>
                  ))}
              </ul>
            </div>
          </div>
          <div className="mt-2 about-provider-details">
            <div className="provider-details">
              <h6 className="mb-5px text-color">Phone</h6>
              <h4 className="mb-0 black fw-bold  ">
                {data?.phone_number || '--'}
              </h4>
            </div>
            <div className="provider-details ">
              <h5 className="mb-5px text-color">Email</h5>
              <h4 className="mb-0 black fw-bold  ">
                <a className="ethera-email" href="mailto:issac@ethera.com">
                  {data?.email || '--'}
                </a>
              </h4>
            </div>
          </div>

          <div className="provider-details mt-2">
            <h6 className="mb-5px text-color">Website/Profile Link</h6>
            <h4 className="mb-5px black fw-bold  ">
              <a className="ethera-link">{data?.website_link || '--'}</a>
            </h4>
          </div>
        </div>
      </CardBody>
    </div>
  )
}

export default ProviderCard
